Skip to content

Add error handling to localStorage operations#5329

Merged
walterbender merged 1 commit intosugarlabs:masterfrom
vanshika2720:fix-localstorage-error-handling
Jan 25, 2026
Merged

Add error handling to localStorage operations#5329
walterbender merged 1 commit intosugarlabs:masterfrom
vanshika2720:fix-localstorage-error-handling

Conversation

@vanshika2720
Copy link
Contributor

@vanshika2720 vanshika2720 commented Jan 25, 2026

Summary

This PR adds try-catch blocks to localStorage.setItem() operations across several components to prevent the application from crashing when browser storage is restricted (e.g., in Private Browsing mode or when the storage quota is exceeded).

Fixes #5326

Problem

In many browsers (specifically Safari and Firefox in Private Mode), localStorage read/write operations can throw security exceptions. Additionally, if the disk space is full, it throws a QuotaExceededError. Previously, these were unhandled, causing parts of the UI (theme switching, language switching) to fail silently or crash the script execution.

Solution

Wrapped localStorage.setItem calls in the following files with defensive try-catch blocks:

  • [js/themebox.js]
  • [js/languagebox.js]
  • [js/widgets/reflection.js]

This ensures that even if persistence fails, the application logic continues to run, providing a better user experience through graceful degradation.

Visual Proof

Before Fix

before error

Observation: Attempting to change the theme while storage is blocked results in an uncaught QuotaExceededError at themebox.js:266, stopping the theme from applying.

After Fix

aftre error handling

Observation: With the fix, the error is caught at themebox.js:269. The UI remains functional, and a graceful warning is logged to the console instead of a crash.

Checklist

  • I have read and followed the project's CONTRIBUTING.md.
  • I have tested the changes locally in Safari Private Mode.
  • My code follows the project's style guidelines.
  • I have provided an AI usage disclosure below.

Wrap localStorage.setItem() calls in try-catch blocks to prevent
crashes when storage is unavailable (e.g., private browsing mode,
quota exceeded, or security restrictions).

Modified files:
- js/themebox.js: Theme preference storage
- js/languagebox.js: Language preference storage
- js/widgets/reflection.js: Analysis report storage

All localStorage operations now gracefully handle errors with
console.warn logging, ensuring the application remains functional
even when storage fails.
@github-actions
Copy link
Contributor

✅ All Jest tests passed! This PR is ready to merge.

@vanshika2720
Copy link
Contributor Author

Hi @walterbender @vyagh @chimosky
This PR adds defensive try-catch handling around localStorage.setItem() calls to prevent crashes in environments where storage is restricted (such as Safari/Firefox Private Mode or quota limits).

I’ve tested the changes locally (including Safari Private Mode), and the UI now degrades gracefully while logging warnings instead of throwing uncaught exceptions. The implementation follows the existing pattern already used in js/activity.js.

Whenever you have time, I’d appreciate a review. Happy to make any adjustments or improvements if needed — thanks for your time and guidance!

@walterbender
Copy link
Member

Looks good but please remove the unrelated PR for abc test.

@vanshika2720 vanshika2720 force-pushed the fix-localstorage-error-handling branch from 776e9bd to 971031b Compare January 25, 2026 22:25
@github-actions
Copy link
Contributor

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

abc.test.js

@walterbender walterbender merged commit da12f94 into sugarlabs:master Jan 25, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add error handling to all localStorage operations

2 participants